<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${envName != null ? '登录 - ' + envName + '环境' : '登录'}"></title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .env-header {
            background-color: #f0f0f0;
            padding: 10px;
            text-align: center;
            font-weight: bold;
            border-bottom: 1px solid #ccc;
        }
        .env-dev { background-color: #ffeb3b; }
        .env-test { background-color: #2196f3; color: white; }
        .env-prod { background-color: #f44336; color: white; }
        .env-uat { background-color: #9c27b0; color: white; }
    </style>
<!--    <link th:href="@{/css/index.css}" rel="stylesheet">-->
</head>
<body>
<div id="app">
    <!-- 头部环境标识 -->
    <div class="env-header" th:classappend="${'env-' + envName}" th:text="${'当前环境: ' + envName}"></div>
    <el-container style="">
        <el-main>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名" prop="usercode">
                    <el-input placeholder="请输入用户名" v-model="form.usercode"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input placeholder="请输入密码" v-model="form.password" @change="onSubmit" show-password clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>


</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--<script th:src="@{/css/index.js}"></script>-->
<!--<script th:src="@{/css/vue.js}"></script>-->
<script th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script th:inline="javascript">
    new Vue({
        el: '#app',
        data: function() {
            var _data = [[${_data}]];
            var ctxPath = [[${ctxPath}]];
            return {
                ctxPath: ctxPath,
                form: {
                    usercode: "",
                    password:"",
                },
                rules: {
                    usercode: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {
            uploadSuccess: function(response, file, fileList) {
                this.form.file_name = response.filename;
                this.form.file_path = response.filepath;
            },
            onSubmit: function() {
                var _this = this;
                _this.$refs.form.validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: this.ctxPath +"/login",
                            type: 'POST',
                            data: JSON.stringify(this.form),
                            dataType: 'json',
                            contentType:"application/json;charset=utf-8",
                            success: function (data) {
                                if (data.code == 0) {
                                    _this.$message({
                                        message: '登录成功',
                                        type: 'success'
                                    });
                                    sessionStorage.setItem("token", data.token)
                                    _this.open();
                                }else{
                                    _this.$message({
                                        message: "登录失败",
                                        type: 'error'
                                    });
                                }
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            open(){
                window.location.href = this.ctxPath +'/list?token=' + sessionStorage.getItem("token");
            }
        }
    })
</script>
</html>